<template>
  <div>
    首页1
    <!-- 四大卡片 -->
    <kapian :list="cardlist" />
    <!-- 折线图 -->
  </div>
</template>

<script>
import kapian from './components/kapain.vue'
export default {
  components: { kapian },
  data() {
    return {
      cardlist: [
        { id: 1, icon: 'icon-wenjian', name: '总订单', num: '104' },
        { id: 2, icon: 'icon-wenjian', name: '总销售额', num: '104' },
        { id: 3, icon: 'icon-wenjian', name: '今日订单数', num: '104' },
        { id: 4, icon: 'icon-wenjian', name: '今日销售额', num: '104' }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  padding: 16px;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  i {
    font-size: 30px;
  }
  h3 {
    color: green;
    margin-bottom: 10px;
  }
  p {
    color: red;
  }
}
.bg-purple {
  background: #d3dce6;
}
</style>
